<template>
  <div>
    <nav class="navbar">
      <div class="navbar-brand">
        <img src="../assets/logo.png" width="30" height="30" title="logo" />
      </div>

      <div class="hidden-xs-only">
        <router-link to="/home">
          <div class="router"><IconPark type="home" theme="outline" size="20" />首页</div>
        </router-link>
      </div>
      <div class="hidden-xs-only">
        <router-link to="/about">
          <div class="router">
            <IconPark type="more-three" theme="outline" size="20" />关于
          </div>
        </router-link>
      </div>
      <div class="hidden-xs-only">
        <router-link to="/web">
          <div class="router">
            <IconPark type="network-tree" theme="outline" size="20" />网站导航
          </div>
        </router-link>
      </div>
      <div>
        <router-link to="/login">
          <div class="router">
            <IconPark type="login" theme="outline" size="20" />登录
          </div>
        </router-link>
      </div>
    </nav>
  </div>
</template>

<script>
import { IconPark } from "@icon-park/vue-next/es/all";
export default {
  components: {
    IconPark,
  },
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
a.router-link-active {
  .i-icon {
    color: #42b983;
  }
}
.router {
  display: flex;
  align-items: center;
}
.flex {
  display: flex;
  justify-content: space-between;
}
</style>
